
import React, { PropTypes, Component } from 'react';
import styles from './TodayDataTable2.css';
import {myAjax, ROOTURL_TABLE, ROOTPATH} from './../publicAPI/publicAPI';
import fetch from 'isomorphic-fetch';
import mapImg from './../imgs/map2.png';
import mapIcon from './../imgs/mapIcon2.png';

export default React.createClass({
	getInitialState: function() {
		return {
			tData: [{}],
			allData: [{}],
			nationalData: {},
			hasAlerted: false,
			hasFullScreen: false,
		};
	},

	componentWillMount: function() {
		//console.log("执行了");
		this.getData();
	},

	componentDidMount: function() {
		//console.log('执行');
		let _this = this;
		this.timer = setInterval(function() {
			//console.log('获取数据');
			//获取当日数据
			fetch(ROOTURL_TABLE + 'cafune/shop/locshopdaydata.api', { 
			    method: 'GET',
			    headers: { 
			      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
			    }, 
				//body: analysisJson(param) 
			})
			.then((response) => {
				//console.log(response);
				if (response.ok) {
					response.json().then(function(data) {
						//console.log(data);
						//this.setState({tData: data});
						//console.log("???" + this.state.tData);
						var processData = [];
						var ids = data.citys;
						for(var i in ids) {
							let id = ids[i];
							let cityName = {cityName: id}
							Object.assign(data[id], cityName);
							processData.push(data[id]);
						}
						//console.log(processData);
						this.setState({
							tData: processData,
							nationalData: data.nationalDayData
						});
						//console.log(this.state.tData);
					}.bind(_this));
				} else {
					console.log("Looks like the response wasn't perfect, got status", response.status);
				}

			})
			.catch(function (error) {
				alert("获取服务器内容失败");
				console.log('Request failed', error);
			});

			//获取历史总数据
			fetch(ROOTURL_TABLE + 'cafune/shop/allshopdata.api', { 
			    method: 'GET',
			    headers: { 
			      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
			    }, 
				//body: analysisJson(param) 
			})
			.then((response) => {
				//console.log(response);
				if (response.ok) {
					response.json().then(function(data) {
						//console.log(data);
						let processData = [];
						processData.push(data);
						this.setState({allData: processData});
						//console.log(this.state.tData);
					}.bind(_this));
				} else {
					console.log("Looks like the response wasn't perfect, got status", response.status);
				}

			})
			.catch(function (error) {
				if(!this.state.hasAlerted) {
					alert('获取服务器内容失败');
					this.setState({hasAlerted: true});
				}
				console.log('Request failed', error);
			});
		}, 15000);
	},
	componentWillUnmount: function() {
		let stop = window.clearInterval(this.timer);
	},
	getData: function() {
		//console.log('获取数据');
		let _this = this;
		//获取当日数据
		fetch(ROOTURL_TABLE + 'cafune/shop/locshopdaydata.api', { 
		    method: 'GET',
		    headers: { 
		      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
		    }, 
			//body: analysisJson(param) 
		})
		.then((response) => {
			//console.log(response);
			if (response.ok) {
				response.json().then(function(data) {
					console.log(data);
					//this.setState({tData: data});
					//console.log("???" + this.state.tData);
					var processData = [];
					var ids = data.citys;
					for(var i in ids) {
						let id = ids[i];
						let cityName = {cityName: id}
						Object.assign(data[id], cityName);
						processData.push(data[id]);
					}
					//console.log(processData);
					this.setState({
						tData: processData,
						nationalData: data.nationalDayData
					});
					//console.log(this.state.tData);
				}.bind(_this));
			} else {
				console.log("Looks like the response wasn't perfect, got status", response.status);
			}

		})
		.catch(function (error) {
			alert("获取服务器内容失败");
			console.log('Request failed', error);
		});

		//获取历史总数据
		fetch(ROOTURL_TABLE + 'cafune/shop/allshopdata.api', { 
		    method: 'GET',
		    headers: { 
		      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
		    }, 
			//body: analysisJson(param) 
		})
		.then((response) => {
			//console.log(response);
			if (response.ok) {
				response.json().then(function(data) {
					//console.log(data);
					let processData = [];
					processData.push(data);
					this.setState({allData: processData});
					//console.log(this.state.tData);
				}.bind(_this));
			} else {
				console.log("Looks like the response wasn't perfect, got status", response.status);
			}

		})
		.catch(function (error) {
			console.log('Request failed', error);
		});
	},
	fullScreen: function() {
		if(this.state.hasFullScreen) {
			let fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
            if(fullscreenEnabled) {
                if(document.exitFullscreen) {
                    document.exitFullscreen();
                } else {
                    if(document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else {
                        if(document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                        }
                    }
                }
            }
            this.setState({hasFullScreen: false});
		} else {
			let FullScreenDiv = this.refs.imgWrap;
			if(FullScreenDiv.requestFullscreen) {
	            //noinspection JSUnresolvedFunction
	            FullScreenDiv.requestFullscreen();
	        } else { //noinspection JSUnresolvedVariable
	            if(FullScreenDiv.mozRequestFullScreen) {
		            //noinspection JSUnresolvedFunction
		            FullScreenDiv.mozRequestFullScreen();
	        	} else { //noinspection JSUnresolvedVariable
	                if(FullScreenDiv.webkitRequestFullscreen) {
		                //noinspection JSUnresolvedFunction
		                FullScreenDiv.webkitRequestFullscreen();
	            	} else { //noinspection JSUnresolvedVariable
	                    	if(FullScreenDiv.msRequestFullscreen) {
	                            //noinspection JSUnresolvedFunction
	                            FullScreenDiv.msRequestFullscreen();
	                        }
	                }
	            }
	        }
	        this.setState({hasFullScreen: true});
		}
	},
	getFullScreenStyle: function() {
		let style = {};
		style.height =  window.screen.height.toString();
		style.width = window.screen.width.toString();
		return style;
	},
	getFullScreenIcon: function(cityName) {
		let _this = this;
		let style = {};
		let screenWidth = window.screen.width;
		let imgHeight = window.screen.height;
		let imgWidth = window.screen.height*1.409;
		//手动描点
		switch(cityName) {
			case '广州市':
				style.top = imgHeight*0.838;
				style.left = imgWidth*0.619 + (screenWidth-imgWidth)*0.5;
				return style;
				break
			case '深圳市':
				style.top = imgHeight*0.844;
				style.left = imgWidth*0.628 + (screenWidth-imgWidth)*0.5;
				return style;
				break
			case '成都市':
				style.top = imgHeight*0.658;
				style.left = imgWidth*0.481 + (screenWidth-imgWidth)*0.5;
				return style;
				break
			case '重庆市':
				style.top = imgHeight*0.687;
				style.left = imgWidth*0.517 + (screenWidth-imgWidth)*0.5;
				return style;
				break
			case '长沙市':
				style.top = imgHeight*0.714;
				style.left = imgWidth*0.613 + (screenWidth-imgWidth)*0.5;
				return style;
				break
			default:
				/*alert("有门店位置未渲染或渲染失败")*/
				style.top = imgHeight*0.838;
				style.left = imgWidth*0.619 + (screenWidth-imgWidth)*0.5;
				return style;
				break
		}
	},
	getFullScreenData: function(cityName) {
		let IconStyle = this.getFullScreenIcon(cityName)
		let style = {};
		style.top = IconStyle.top-180;
		style.left = IconStyle.left-70;
		return style;
	},
	getNationalDataStyle: function() {
		let style = {};
		if (!this.state.hasFullScreen) {
			style.bottom = style.right =  '0';
		} else {
			style.bottom = 0;
			style.right = (window.screen.width - window.screen.height*1.409)*0.5;
		}
		console.log(style);
		return style;
	},

	render: function() {
		let _this = this;
		return (
			<div className={styles['table-container']}>
				<div className={styles['AllData-wrap']}>
					{
						this.state.allData.map(function(cityData, index, arr) {
							//console.log(cityData);
							return (
								<div>
									<ul>
										<li>历史总数据</li>
										<li>门店数量：{cityData.allShopCount}</li>
										<li>总订单数：{cityData.allShopContractCount}</li>
										<li>总客流量：{cityData.allShopKll}</li>
										<li>总营业额：{parseFloat(cityData.allShopTurnover).toFixed(2)}</li>
									</ul>
								</div>
							);
						})
					}
				</div>
				<div ref="fullScreenImg" className={styles['img-container']}>
					<div ref="imgWrap" className={styles['img-wrap']}  onClick={this.fullScreen} style={this.state.hasFullScreen? this.getFullScreenStyle() : {}}>
						<img className={styles['map']} src={require('../imgs/map2.png')} />
						<div className={styles['nationalData']} style={this.getNationalDataStyle()}>
						<ul>
							<li>全国(当天)</li>
							<li>客流量：{this.state.nationalData.nationalDayKll}</li>
							<li>订单数：{this.state.nationalData.nationalDayContractCount}</li>
							<li>已服务：{this.state.nationalData.nationalDayServedCount}</li>
							<li>已支付：{this.state.nationalData.nationalDayPayedCount}</li>
							<li>总营业额：{this.state.nationalData.nationalDayTurnover}</li>
						</ul>
						</div>
						<div className={styles['div-wrap']}>
							{
								this.state.tData.map(function(cityData, index, arr) {
									//console.log(cityData);
									let top;
									let left;
									switch(cityData.cityName) {
										case '广州市': 
											top = '549px';
											left = '571px';
											name = 'GuangZhou';
											break;
										case '深圳市':
											top = '553px';
											left = '580px';
											name = 'ShenZhen';
											break;
										case '成都市':
										    top = '431px';
										    left = '444px';
										    name = 'ChengDu';
										    break;
										case '长沙市':
										    top = '468px';
										    left = '566px';
										    name = 'ChangSha';
										    break;
										case '武汉市':
										    top = '432px';
										    left = '584px';
										    name = 'WuHan';
										    break;
										case '重庆市':
										    top = '450px';
										    left = '477px';
										    name = 'ChongQing';
										    break;
										/*default: 
											alert('有门店位置未渲染或渲染失败！');*/
									}
									return (
										<div>
											<div>
												<img src={mapIcon} className={`${styles['mapIcon']} ${styles[`${name}`]}`} style={_this.state.hasFullScreen? _this.getFullScreenIcon(cityData.cityName) : {top: top, left: left}}/>
												<div className={`${styles.content} ${styles[`${name}Data`]}`} style={_this.state.hasFullScreen? _this.getFullScreenData(cityData.cityName) : {}}>
													<ul>
														<li>地区(当天)：{cityData.cityName}</li>
														<li>日客流量：{cityData.dayKll}</li>
														<li>日订单数：{cityData.dayContractCount}</li>
														<li>日服务数：{cityData.dayServedCount}</li>
														<li>已支付：{cityData.dayPayedCount}</li>
														<li>日营业额：{cityData.dayTurnover}</li>
													</ul>
												</div>
											</div>
										</div>
									);
								})
							}
						</div>
					</div>
					
					
				</div>
    		</div>
		);
		
	},

});

